<template>
<div class="rx-mobile-filter-box">
    <div>
        <a-form>
            <a-row>
                <a-col :span="8">
                    <a-form-item :label="i18n('form.queryView','是否显示查询视图')" >
                        <a-switch v-model="isShowView" />
                    </a-form-item>
                </a-col>
                <a-col :span="16">
                    <a-form-item :label="i18n('form.viewStyle','查询视图风格')">
                        <a-radio-group v-model="isViewHeader">
                            <a-radio value="NO">{{i18n('list.defPack','默认收起')}}</a-radio>
                            <a-radio value="YES">{{i18n('list.tabLabel','放在顶部TAB标签')}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </div>
    <div class="rx-mobile-header">
        <span class="rx-mobile-title">{{i18n('list.viewConfig','系统视图配置')}}</span>
        <div class="toolbar-right">
            <a-button type="primary" @click="showSearchViewEdit()">{{i18n('list.ascOrder','新增系统视图')}}</a-button>
            <a-button class="rx-mobile-button rx-modile-del" @click="remove">{{$ti18('rxList.delBtn','删除')}}</a-button>
        </div>
    </div>
    <div class="rx-mobile-grid-container">
        <rx-grid
            ref="rxTable"
            :bordered="true"
            :showColumnsMenu="true"
            :dataSource="gridData"
            :columns="columns"
            :allowRowSelect="true"
            :heightAuto="true"
            :multiSelect="true"
            :showPage="false"
        >
            <span slot="viewType" slot-scope="{text,record,index}">
                <span style="color:orange;" v-if="text=='SYSTEM'">{{$comi18('business.systemView', '系统视图')}}</span>
                <span style="color:green;" v-if="text=='USER'">{{i18n('list.personView','个人视图')}}</span>
            </span>
            <span slot="defautView" slot-scope="{ text, record, index }">
        <a-switch v-show="record.viewType=='SYSTEM'" @change="defaultViewChange($event,record)"
                  v-model="record.defaultView"/>
      </span>
            <span slot="searchViewSetting" slot-scope="{ text, record, index }">
        <a-button @click="showSearchViewEdit(record)">{{$ti18('rxList.editBtn','编辑')}}</a-button>
      </span>
        </rx-grid>
    </div>
</div>
</template>

<script>

import {RxGrid, Util,Dialog} from "@lowcode/jpaas-common-lib";
export default {
    name: "mobileFilter",
    data(){
        return {
            vm:null,
            columns:[
                {
                    title: this.i18n('form.viewName','查询视图名称'),
                    dataIndex: 'name',
                    width: 120,
                },
                {
                    title: this.i18n('form.viewType','视图类型'),
                    dataIndex: 'viewType',
                    scopedSlots: {customRender: 'viewType'},
                    width: 120,
                },
                {
                    title: this.i18n('form.defaultView','设置为默认视图'),
                    dataIndex: 'defautView',
                    scopedSlots: {customRender: 'defautView'},
                    width: 120,
                },
                {
                    title: this.i18n('form.queryConfig','查询视图配置'),
                    dataIndex: 'searchViewSetting',
                    scopedSlots: {customRender: 'searchViewSetting'},
                    width: 120,
                },
            ],
            gridData:[],
            isShowView:true,
            isViewHeader:'NO',
            maxSn:0
        }
    },
    components:{
        RxGrid
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formEditMobile", key);
        },
        setData(vm,data){
            this.vm=vm;
            this.isShowView=(data.mobileIsSearchView || 'YES')=='YES';
            this.isViewHeader=data.mobileIsViewHeader || 'NO';
            this.gridData.push(...(data.mobileView || []));
            this.handDataSourceSn();
        },
        handDataSourceSn(){
            this.gridData.forEach(item=>{
                if(item.sn>this.maxSn){
                    this.maxSn=item.sn;
                }
            })
        },
        getData(){
            var ary=this.$refs.rxTable.getData();
            return {success:true,data:{mobileIsShowView:this.isShowView?'YES':'NO',mobileIsViewHeader:this.isViewHeader,mobileView:ary}};
        },
        validName(name){
            var ary=this.gridData.filter(item=>{
                return item.name==name;
            })
            return ary.length>0;
        },
        showSearchViewEdit(record){
            var self = this;
            var conf = {
                curVm: this,
                data: {
                    record: record,
                    fieldDatas: this.vm.$refs.editSearchView.$refs['table_searchField'].getData(),
                    validFunc:function(data){
                        if((!record || record.name!=data.name) && self.validName(data.name)){
                            self.$message.error(self.i18n('msg.canNotSameView','查询视图名称不能重复！'));
                            return false;
                        }
                        return true;
                    }
                },
                widthHeight: ['800px', '400px'],
            }
            Dialog.openSearchViewContent(conf,function(data){
                if (!record) {
                    self.gridData.push({
                        isNew: true,
                        name: data.name,
                        viewType: 'SYSTEM',
                        defaultView: false,
                        isShow:true,
                        sn:++self.maxSn,
                        queryCondition: JSON.stringify(data.queryCondition)
                    });
                } else {
                    record.name = data.name;
                    record.queryCondition = JSON.stringify(data.queryCondition);
                }
            })
        },
        defaultViewChange(checked, record) {
            var table = this.$refs.rxTable;
            var rows = table.getData();
            for (var i = 0; i < rows.length; i++) {
                table.updateRow(rows[i], {defaultView: false});
            }
            record.defaultView = checked;
        },
        remove(){
            let table = this.$refs.rxTable ;
            table.removeRows();
            table.selectedRowKeys=[];
            table.selectedRows=[];
            this.handDataSourceSn();
            this.$forceUpdate();
        }
    }
}
</script>

<style scoped>
.toolbar-right button{
    margin-right: 10px;
}
.rx-mobile-header{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    align-items: center;
}
.rx-mobile-header .rx-mobile-title{
    padding-left: 8px;
    position: relative;
    font-weight: bold;
}
.rx-mobile-header .rx-mobile-title:before{
    content: '';
    width: 2px;
    height: 12px;
    background-color: #1890ff;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 0;
}
.rx-mobile-filter-box >>> .ant-row.ant-form-item{
    margin-bottom: 0;
    display: flex;
}
.rx-mobile-button{
    background-color: #f5f7fa;
}
.rx-mobile-button:focus,
.rx-mobile-button:active{
    border-color: #d9d9d9;
    color: rgba(0,0,0,.65);
}
.rx-modile-del:hover{
    background-color: #ff4d4f;
    border-color: #ff4d4f;
    color: #fff;
}
</style>